<template>
<div>
<div>
    <img :src="banner[currentIndex]" alt="" class="banner">
    <router-link to="/Goods">
        <div style="display: flex;flex-wrap: wrap;
    justify-content: space-evenly;" >
        <div v-for="item in service" >
        <div class="service-item">
            <img :src="item.img" alt="" class="service-img">
            <p class="service-text">{{item.text}}</p>
        </div>
    </div>
    </div>
    </router-link>
   
   
</div>
</div>
</template>
<script setup>
import {ref} from 'vue';
import {getBanner,postService} from '../api/index.js'
// 图片
const banner = ref([])
const currentIndex = ref(0)
getBanner('https://d941b892-db01-4b40-b8ac-4dd0901f822f.bspapp.com/apis/banner/pub/getList').then(res => {
			console.log(res.data.rows[0].img)
            banner.value=res.data.rows.map(row=>row.img)
            startPic()
		})
		.catch(err => {
			console.log(err)
		})
// 轮播
function startPic(){
    setInterval(()=>{
        let nextIndex=currentIndex.value+1
        if(nextIndex>=banner.value.length){
            nextIndex=0
        }
        currentIndex.value=nextIndex
    },3000)
}
// 服务内容
const service = ref([])
postService('https://d941b892-db01-4b40-b8ac-4dd0901f822f.bspapp.com/apis/wuye/serve/pub/getList').then(res=>{
			console.log(res.data.rows)
            service.value=res.data.rows
		})
		.catch(err=>{
			console.log(err)
		})

</script>
<style scoped>
.banner{
    width: 100%;
    height: 170px;

}
.service-img{
    width: 100px;
    height: 100px;
}
.service-text{
    font-size: 14px;
    text-align: center;
}
.service-item{
    width: 120px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>
